<template>
  <el-dialog
    v-model="model"
    :close-on-click-modal="false"
    :title="title"
    width="415px"
    @open="resetFn(ruleFormRef)"
    @close="modal = false"
  >
    <div class="form">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="115px"
        class="demo-ruleForm"
        status-icon
      >
        <div class="account">
          <el-form-item label="账号" prop="email">
            <el-input
              v-model="ruleForm.email"
              clearable
              placeholder="请输入账号"
              :disabled="editorDisabled"
              @blur="remoteMethod"
            />
            <!-- <el-select
              v-model="ruleForm.account"
              filterable
              remote
              clearable
              reserve-keyword
              placeholder="请输入账号"
              :remote-method="remoteMethod"
              :loading="loading"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.account"
                :value="item.account"
              />
            </el-select> -->
          </el-form-item>
          <span class="email">@itcast.cn</span>
        </div>
        <el-form-item label="工号" prop="jobNumber">
          <el-input v-model="ruleForm.jobNumber" disabled />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name" disabled />
        </el-form-item>
        <el-form-item label="数据授权" prop="businessLineIdList">
          <el-checkbox-group v-model="ruleForm.businessLineIdList">
            <el-checkbox v-for="(type, index) in authData" :key="index" :label="type.id">{{ type.name }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="model = false">取消</el-button>
        <el-button type="primary" @click="okFn(ruleFormRef)">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ref } from 'vue'
import { validateSystemAccountName } from '@/util/validate'
import { getBusinessLinesApi } from '@/api/common'
import { getSystemAccountDetailApi, editorSystemAccountApi, addSystemAccountApi, getUserList } from '@/api/system/systemAccount'
import { map } from 'lodash-es'

export default {
  emits: ['refresh-list'],
  setup(props, { emit }) {
    const title = ref('添加用户')
    const editorDisabled = ref(false)
    const model = ref(false)
    const options = ref([])
    const loading = ref(false)
    const ruleFormRef = ref()
    const ruleForm = reactive({
      email: '',
      account: '',
      jobNumber: '',
      name: '',
      businessLineIdList: []
    })
    const authData = ref([])
    const rules = reactive({
      email: [
        { required: true, message: '请输入账号', trigger: 'blur, change' },
        { validator: validateSystemAccountName, trigger: 'change', required: true  }
      ],
      businessLineIdList: [
        { type: 'array', required: true, message: '请选择数据授权', trigger: 'change' }
      ]
    })
    // 打开dialog
    const show = val => {
      model.value = true
      if (typeof val === 'number') {
        // 回显数据
        title.value = '编辑用户'
        editorDisabled.value = true
        editFn(val)
      } else {
        editorDisabled.value = false
      }
    }
    // 重置
    const resetFn = formEl => {
      formEl.resetFields()
    }
    // 远程搜索账号
    const remoteMethod = query => {
      if (query) {
        getUserList(`${ruleForm.email}@itcast.cn`).then(res => {
          Object.assign(ruleForm, res)
        })
      }
    }

    const getBusinessLineList = async() => {
      const res = await getBusinessLinesApi()
      authData.value = res
    }
    // 确认添加
    const okFn = async formEl => {
      if (!formEl) return
      await formEl.validate(async(valid, fields) => {
        if (valid) {
          // console.log('ruleForm', ruleForm)
          // delete ruleForm.email
          // delete ruleForm.businessLineList
          let  res = editorDisabled.value ? await editorSystemAccountApi(ruleForm) : await addSystemAccountApi(ruleForm)
          if (!res) {
            emit('refresh-list')
            model.value = false
          }
        } else {
          console.log('error submit!', fields)
        }
      })
    }
    // 编辑
    const editFn = async val => {
      const res = await getSystemAccountDetailApi(val)
      console.log('详情', res)
      if (res.account) {
        res.businessLineIdList = map(res.businessLineList, 'id')
        res.email = res.account.substring(0, res.account.indexOf('@'))
        Object.assign(ruleForm, res)
      }
    }
    onMounted(() => {
      getBusinessLineList()
    })
    return {
      title,
      model,
      editorDisabled,
      ruleFormRef,
      ruleForm,
      rules,
      options,
      loading,
      authData,
      show,
      resetFn,
      remoteMethod,
      getBusinessLineList,
      okFn
    }
  }
}

</script>

<style scoped lang="scss">
.code {
  display: flex;
}
.account {
  display: flex;
  // align-items: center;
  .email {
    height: 32px;
    width: 90px;
    line-height: 32px;
    text-align: center;
    border: 1px solid #dcdfe6;
    border-left-color: transparent;
  }
}
</style>
